<script setup>
/*
 自定义指令
*/
import { ref } from 'vue'
const color = ref('pink')
const vColor = {
  ////el表示当前指令所绑定的dom,binding-自定义指令传递的值
  created(el, binding, vnode, prevVnode) {
  },
  //在元素被插入到dom前调用
  beforeMount(el, binding, vnode, prevVnode) { },
  //绑定元素的父组件更新前调用
  beforeUpdate(el, binding, vnode, prevVnode) { },
  //绑定元素的父组件卸载前调用
  beforeUnmount(el, binding, vnode, prevVnode) { },
  //绑定元素的父组件卸载后调用
  unmounted(el, binding, vnode, prevVnode) { },

  mounted: (el, binding) => {
    //在绑定元素的父组件以及他自己的所有子节点都挂载完成后调用
    // 第一次执行的时候调用
    console.log(el);
    console.log(binding);
    el.style.color = binding.value;
  },
  // 绑定元素的父组件以及他自己的所有子节点都更新后调用
  updated: (el, binding) => {
    console.log('update函数被触发');
    el.style.color = binding.value;
  },

}

//如果函数中的逻辑完全相同，则对象格式的自定义指令可以简写为函数格式
// const vColor=(el,binding)=>{
//   el.style.color=binding.value;
// }
</script>

<template>
  <button @click="color = 'red'">点击变为红色</button>
  <div v-color="color">
    自定义指令的使用
  </div>
  <div v-loglog>全局指令的使用</div>
</template>